<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{/* 初始化所有标签 */
			margin:0;
			padding:0;
				
			}
			.big box{width:300px;
				height:300px;
				border:1px solid red;
				font-size:36px;
				text-align:center;
				float:left;
				margin-rihgt:10px;
				
				
				
				
			}
			.box{
				width:200px;
				height:200px;
				border:1px solid red;
				font-size:36px;
				text-align:center;
				float:left;
				margin-rihgt:10px;
			}
			.clear{
				clear:both;
			}
			.fu{
				overflow:hidden;
			}
			/* 3.添加after伪元素 */
			.clearfix::after{/* 在...之后 */
			content:"";/* 内容为空 */
			display:block;/* 转为块元素 */
			height:0;
			clear:both;/* 清楚两端浮动 */
			visibility:hidden;/* 显示状态:隐藏 */
			
			}
			/* 4.添加双伪元素 */
			
		</style>
	</head>
	<body>
		<!-- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 -->
		<!-- 标准流+浮动布局策略：父级用标准流排列上下位置，內部子元素用浮动排列左右位置 -->
		<!-- 传统的网页布局：标准流（元素的显示模式）+浮动+定位 -->
		<!-- 浮动float:让块级元素一行内显示 
						float:left;左浮动，盒子从左往右摆放
						float:right;右浮动，盒子从右往左摆放
						float：none；不浮动，默认值。
		1.浮动的元素会脱标（脱离标准流）
		清除浮动方法：
		1.额外标签法：隔墙法
		2.给父盒子添加overflow:hidden;
		3.给父元素添加after伪元素
		-->
		<!-- 快速创建标签：
		1.直接创建标签：标签名*个数>tab键
		2.创建带有类名的标签：标签名.类名*个数>tab键
		3.创建带有类名的div:.类名*个数>tab键 -->
		<div class="clearfix"><div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div></div>
		
		<div class="clear"></div>
		
	</body>
</html>
